<template>
  <div class="login-container">
    <el-card class="login-card">
      <div class="avatar" />
      <!-- 添加头像 -->
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item prop="account">
          <el-input
            v-model="form.account"
            placeholder="请输入账号"
            prefix-icon="el-icon-user"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            type="password"
          />
        </el-form-item>
        <el-form-item prop="code">
          <el-row align="middle" justify="center" type="flex">
            <el-col :span="12">
              <el-input
                v-model="form.code"
                style="width: 131%"
                placeholder="请输入验证码"
                prefix-icon="el-icon-picture"
              />
            </el-col>
            <el-col :span="12">
              <img alt="验证码" :src="imageCodeUrl" @click="getVerifyCode">
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <div style="display: flex; justify-content: center">
            <el-button class="btnColor" @click="submitForm">登录</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'Login',
  data() {
    return {
      form: {
        account: 'demo',
        password: '888itcast.CN764%...',
        code: ''
      },
      login: {},
      rules: {
        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur'
          },
          {
            pattern: /^[a-zA-Z0-9]{4}$/,
            message: '验证码应为4位字符',
            required: true,
            trigger: 'blur'
          }]
      },
      imageCodeUrl: '',
      randomStr: ''
    }
  },
  mounted() {
    this.getImageCode()
  },
  methods: {
    getVerifyCode() {
      // 获取验证码图片
      this.getImageCode()
    },
    async submitForm() {
      await this.$refs.form.validate()
      // 提交表单
      console.log(this.form)
      this.login = {
        clientToken: this.randomStr,
        code: this.form.code,
        password: this.form.password,
        loginType: 0,
        loginName: this.form.account
      }
      const res = await request({
        method: 'POST',
        url: '/api/user-service/user/login',
        data: this.login
      })
      console.log(res)
      await this.$store.dispatch('user/handleLogin', this.login)
      await this.$store.dispatch('user/getUserInfo', this.login)
      this.$message.success('登录成功')
      this.$router.push('/')
    },
    generateRandomStr() {
      const length = 20 // 生成的字符串长度
      let result = ''
      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
      const charactersLength = characters.length
      for (let i = 0; i < length; i++) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength))
      }
      return result
    },
    // 获取验证码图片的方法
    getImageCode() {
      // 生成新的随机字符串
      this.randomStr = this.generateRandomStr()
      this.imageCodeUrl = `https://likede2-java.itheima.net/api/user-service/user/imageCode/${this.randomStr}`
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: url("../../assets/background.be4fae7d.png") no-repeat top /
    cover;
}
.btnColor{
  background-color: #556de9;
  color:#fff
}
.login-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 518px;
  height: 400px;
  padding-top: 35px;
}

.el-form-item {
  width: 100%;
  margin-left: -41px; /* 设置表单项宽度 */
}

.el-row {
  width: 100%; /* 设置行宽度 */
}

.el-col:first-child {
  flex: 0 0 50%;
}

.el-col:last-child {
  flex: 0 0 50%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 10px; /* 调整验证码输入框与右侧边界之间的距离 */
}

.el-input {
  width: 100%; /* 让输入框充满整个表单项 */
}

.el-button {
  width: 448px;
  height: 52px; /* 让按钮充满整个表单项 */
  margin-top: 20px; /* 设置按钮与输入框之间的距离 */
}

.avatar {
  position: absolute;
  margin-left: 183px;
  margin-top: -123px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 10px solid #fff; /* 设置白色边框 */
  background-color: #f5f5f5; /* 设置灰色背景 */
  background: url("../../assets/logo.595745bd.png") no-repeat top / cover;
}
</style>
